<template>
  <div class="">
    <!-- 上部 -->
    <el-row
      type="flex"
      justify="space-between"
      style="margin-bottom:20px"
    >
      <div style="color:pink;font-size: 12px">说明：目前支持学科和关键字条件筛选</div>
      <el-button
        type="success"
        icon="el-icon-edit"
        size="small"
        @click="$router.push('/questions/new')"
      >新增试题</el-button>
    </el-row>
    <!-- 上部 -->
    <!-- 关键字搜索表单 -->
    <el-form
      ref="formData"
      label-width="80px"
      :model="formData"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item
            label="学科"
            prop="subjectID"
          >
            <el-select
              v-model="formData.subjectID"
              style="width:100%"
            >
              <el-option
                v-for="item in subjectList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="二级目录"
            prop="cat"
          >
            <el-select
              v-model="formData.cat"
              style="width:100%"
            >
              <el-option
                v-for="(item,index) in catList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="标签"
            prop="label"
          >
            <el-select
              v-model="formData.label"
              style="width:100%"
            >
              <el-option
                v-for="(item,index) in labelSelect"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="关键字"
            prop="keyword"
          >
            <el-input
              placeholder="根据题干搜索"
              v-model="formData.keyword"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item
            label="试题类型"
            prop="questionType"
          >
            <el-select
              v-model="formData.questionType"
              style="width:100%"
            >
              <el-option
                v-for="item in questionTypeList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="难度"
            prop="difficulty"
          >
            <el-select
              v-model="formData.difficulty"
              style="width:100%"
            >
              <el-option
                v-for="item in difficultyList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="方向"
            prop="direction"
          >
            <el-select
              v-model="formData.direction"
              style="width:100%"
            >
              <el-option
                v-for="(item,index) in directionList"
                :key="index"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="录入人"
            prop="creatorID"
          >
            <el-select
              v-model="formData.creatorID"
              style="width:100%"
            >
              <el-option
                v-for="item in creatList"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="题目备注"
            prop="remarks"
          >
            <el-input v-model="formData.remarks"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="企业简介"
            prop="shortName"
          >
            <el-input v-model="formData.shortName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item
            label="市"
            prop="province"
          >
            <el-select
              style="width: 100px;"
              v-model="formData.province"
              @change="handleProvince"
            >
              <el-option
                v-for="(item,index) in citySelect.province"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>

          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item
            label="区"
            prop="city"
          >
            <el-select
              v-model="formData.city"
              style="width: 100px;"
            >
              <el-option
                v-for="(item,index) in citySelect.cityDate"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>

        </el-col>

        <el-col :span="6">

          <el-button
            size="small"
            type="primary"
            style="float:right"
            @click="search"
          >搜索</el-button>
          <el-button
            type="danger"
            size="small"
            style="float:right;margin-right:10px"
            @click="clear"
          >清除</el-button>
        </el-col>

      </el-row>
    </el-form>

  </div>
</template>

<script>
// import { choice } from '@/api/hmmm/questions'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import { simple } from '@/api/hmmm/subjects'
import { simple as simples } from '@/api/base/users'
import { simple as labelSimple } from '@/api/hmmm/tags'
// import citys from '@/api/hmmm/citys'
import { provinces, citys } from '@/api/hmmm/citys.js'
export default {
  // 组件名称
  name: '',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {
    // chkState: {
    //   type: Number,
    //   default: 3
    // },
    // questionList: {
    //   type: Array,
    //   required: true
    // }
    // page: {
    //   type: Object,
    //   required: true
    // }
  },
  // 组件状态值
  data () {
    return {
      formData: {
        subjectID: null, // 学科
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 试题难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        city: '', // 企业所在城市
        province: '', // 企业所在省份
        cat: '', // 目录
        label: '' // 标签
      },
      subjectList: [], // 学科列表
      questionTypeList: questionType, // 试题类型列表
      difficultyList: difficulty, // 试题难度列表
      directionList: direction, // 试题方向
      catList: ['二级目录1', '二级目录2'], // 自定义目录
      // labelList: ['标签1', '标签2'], // 自定义标签
      labelSelect: [], // 自定义标签
      creatList: [], // 管理员数据
      citySelect: {
        province: [],
        cityDate: []
      }
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {
    this.simple()
    this.simples()
    this.getCityData()
    this.labelSimple()
  },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () { },
  // 组件方法
  methods: {
    // 标签
    async labelSimple () {
      const { data } = await labelSimple()
      // console.log(data)

      const re = data.map(item => item.label)
      this.labelSelect = re
      // console.log(re)
    },
    // 获取学科列表
    async simple () {
      const { data } = await simple()
      // console.log(data)
      this.subjectList = data
    },
    // 点击搜索事件
    async search () {
      // this.page.pagesize = 1
      // this.$emit('getQuestionsList')
      try {
        this.$refs.formData.validate()
        // const { data } = await choice(this.formData)

        // await this.$emit('updata:questionList', data)
        this.$emit('getQuestionsList', this.formData)
        this.$emit('getCheQuestionsList', this.formData)
        this.$emit('getCheckedQuestionsList', this.formData)
        this.$emit('resCheckedQuestionsList', this.formData)
        // console.log(data.items)
        // this.$message.success('ok')
      } catch (error) {
        console.log(error)
      }
    },
    // 点击清除事件
    clear () {
      this.formData = {
        subjectID: null, // 学科
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 试题难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        city: '', // 企业所在城市
        province: '', // 企业所在省份
        cat: '', // 目录
        label: '' // 标签
      }
      this.$emit('getQuestionsList')
      this.$emit('getCheQuestionsList')
      this.$emit('getCheckedQuestionsList')
      this.$emit('resCheckedQuestionsList')
      this.$message.success('清除成功')
    },
    async simples () {
      // 获取管理员数据
      const { data } = await simples()
      this.creatList = data
      // console.log(data)
    },
    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      // this.requestParameters.city = this.citySelect.cityDate[0]
    }
  }
}
</script>

<style scoped lang="scss">
</style>
